// 判断是否单击到DOM节点外面
import {  ref, onMounted, onUnmounted, Ref, toRefs } from 'vue';

// 参数： 响应式DOM节点
const useClickOutSide = (dropdownRef: Ref< HTMLElement | null >) => {

    // 是否单击到dom节点外面
    const isClickOutSide = ref(false);
    const hander = (e: MouseEvent) => {
        if(dropdownRef.value) {
            // 判断一个节点是否包含子节点
            isClickOutSide.value = dropdownRef.value.contains(e.target as HTMLElement)? false: true;
        }
    }

    onMounted(() => {
        document.addEventListener('click', hander);
    })

    onUnmounted(() => {
        document.removeEventListener('click', hander);
    })
    
    return isClickOutSide
    // return toRefs({
    //     isClickOutSide
    // })
}

export default useClickOutSide;